<template>
  <el-dialog title="新增资源组" :visible.sync="visible" width="60%">
    <el-container>
      <el-aside width="280px">
          <div style="min-height:460px">
                <div>
                  <el-row>
                    <div style="padding-left:10px;height:40px;border-bottom:2px solid #e3e3e3;line-height:40px;background-color:#f2f2f2">
                      分类管理
                    </div>
                  </el-row>
                  <el-row>
                      <el-scrollbar style="height:395px;width:350px">
                          <el-tree
                          :data="resourceGroupTree"
                          highlight-current
                          default-expand-all
                          :expand-on-click-node="false"
                          node-key="id">
                            <span class="custom-tree-node" slot-scope="{ node, data }" style="width:100%;padding-right:70px" @mouseenter="mouseenter1(data)" @mouseleave="mouseleave1(data)">
                              <span v-show="!data.showInput">
                                <span style="font-size:14px" @click="handleNodeClick(data)">{{ node.label }}</span>
                                <el-link v-show="data.show && data.id==data.resourceId" size="mini" @click="addResourceCate(data)" type="primary" icon="el-icon-circle-plus-outline"></el-link>
                                <el-link v-show="data.show" size="mini" @click="editResourceCate(data)" type="primary" icon="el-icon-edit"></el-link>
                                <el-link v-show="data.show && data.id!=data.resourceId" size="mini" @click="deleteData(data,1)" type="primary" icon="el-icon-delete"></el-link>
                                <el-link v-show="data.show && data.id!=data.resourceId" size="mini" @click="upOrDownCate(data,1)" type="primary" title="上移" icon="el-icon-top"></el-link>
                                <el-link v-show="data.show && data.id!=data.resourceId" size="mini" @click="upOrDownCate(data,2)" type="primary" title="下移" icon="el-icon-bottom"></el-link>
                              </span>
                                <el-input v-show="data.showInput" size="mini" style="width:150px;height:24px;" v-model="data.label" :id="'c'+data.id" ></el-input>
                                <el-link v-show="data.showInput" size="mini" @click="cancelEdit(node,data)" type="primary" >取消</el-link>
                                <el-link v-show="data.showInput" size="mini" @click="saveResourceCate(data)" type="primary" >保存</el-link>
                            </span>
                          </el-tree>
                      </el-scrollbar>
                  </el-row>
                </div>
          </div>
        </el-aside>
        <el-main>
          <div style="margin-left:5px">
                <div style="background-color:#f2f2f2">
                  <div style="text-align:center;height:40px;border-bottom:2px solid #e3e3e3;line-height:40px">
                    数字资源
                  </div>
                </div>
                <div style="text-align:center;margin-top:5px;padding-left:5px;line-height:30px">
                  <el-button type="primary" size="mini" @click="downloadResourceTemplate()">下载模板</el-button>
                  <el-upload class="upload-template"
                      :action="uploadGroupResourceInfo"
                      :on-success="uploadGroupResourceInfoSuccess"
                      :show-file-list="false"
                      :data="resourceGroupParam"
                      >
                      <el-button type="success" size="mini">上传模板</el-button>
                  </el-upload>
                  <el-button type="success" size="mini" @click="openUploadGroupResourceDialogue()">上传文件</el-button>
                  <el-button type="primary" size="mini" @click="openAddGroupResourceDialogue()">添加</el-button>
                  <el-button type="primary" style="margin-left:0px;" size="mini" @click="moveToResourceGroupCate()">移动到目录</el-button>
                </div>
                <div style="margin-top:5px;">
                  <el-table :data="tableData"  @selection-change="handleDialogueSelectionChange" height="350px" style="width: 100%;">
                    <el-table-column type="selection" v-model="multipleDialogueSelection" width="55"></el-table-column>
                    <el-table-column prop="name" label="资源名称" width="150"></el-table-column>
                    <el-table-column prop="imgNote" label="图片注释" width="120"></el-table-column>
                    <el-table-column prop="audioName" label="音频文件" width="100"> </el-table-column>
                    <el-table-column label="操作" width="160">
                      <template slot-scope="scope">
                          <el-button type="primary" size="mini" style="margin-left:3px" @click="openEditGroupResourceDialogue(scope.row)">编辑</el-button>
                          <el-button type="danger" style="margin-left:3px" size="mini" @click="deleteData(scope.row,2)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div style="margin-top:10px;">
                    <el-pagination
                      background
                      :hide-on-single-page="true"
                      :total="totalNumResource"
                      :page-size="pageSize"
                      layout="prev, pager, next"
                      @current-change="handleCurrentChangeResource"
                    ></el-pagination>
                  </div>
          </div>
        </el-main>
      </el-container>
      <AddGroupDResourceialogue :resourceId="resourceId" :cateId="categoryId" @get-table-data="getGroupResourceTableData" ref="setAddGroupResourceDialogue"/>
      <EditGroupDResourceialogue :resourceId="resourceId" :formData="editData" @get-table-data="getGroupResourceTableData" ref="setEditGroupResourceDialogue"/>
      <!-- <MoveToResourceGroupDialogue :resourceGroupTree="resourceGroupTree" :multipleSelection="multipleDialogueSelection" @get-resource-data="getGroupResourceTableData" ref="setMoveToReousrceGroupDialogue"/> -->
      <MoveToCategoryDialogue :cateSelectTreeData="cateSelectTreeData" :multipleSelection="multipleDialogueSelection" @get-resource-data="getGroupResourceTableData" ref="setMoveToCategoryDialogue"/>
      <UploadGroupResourceDialogue :resourceId="resourceId" :cateId="categoryId" @get-table-data="getGroupResourceTableData" ref="setUploadGroupResourceDialogue"/>
  </el-dialog>
</template>

<script>
import AddGroupDResourceialogue from "./addGroupResourceDialogue";
import EditGroupDResourceialogue from "./editGroupResourceDialogue";
import MoveToCategoryDialogue from "./moveToCategoryDialogue";
import UploadGroupResourceDialogue from "./uploadGroupResourceDialogue";
  export default {
    name: "InputDialog",
    components: {AddGroupDResourceialogue,EditGroupDResourceialogue,MoveToCategoryDialogue,UploadGroupResourceDialogue},
    data() {
      return {
        resourceId:'',
        categoryId:'',
        visible: false,
        result: '',
        formData:{},
        resourceGroupTree:[],
        currentPage:1,
        pageSize:10,
        multipleDialogueSelection:[],
        tableData:[],
        totalNumResource:0,
        uploadGroupResourceInfo:CONST.SERVICE_REST_PACKAGE + 'increaseResource/importGroupResourceInfo',
        uploadGroupResourceFile:CONST.SERVICE_REST_PACKAGE + 'increaseResource/batchImportGroupResource',
        editData:{},
        cateSelectTreeData:[],
      }
    },
    props: {
      bookId: {
        type: String,
        default: '',
      },
      cateId: {
        type: String,
        default: '',
      },
    },
    computed:{
      resourceGroupParam:function(){
        return {resourceId:this.resourceId,categoryId:this.categoryId}
      }
    },
    methods: {
      openUploadGroupResourceDialogue(){
        this.$refs.setUploadGroupResourceDialogue.visible = true
      },
      cancel(){
        this.visible = false
      },
      uploadGroupResourceInfoSuccess(){
        this.getGroupResourceTableData();
      },
      uploadGroupResourceFileSuccess(){
        this.getGroupResourceTableData();
      },
      getResourceGroupTree() {
        this.axios.get(CONST.SERVICE_REST_PACKAGE + "increaseResource/selectResourceGroupTree", {
            params: {
              resourceId: this.resourceId,
            },
          })
          .then((response) => {
            this.resourceGroupTree = response.data;
          });
      },
      getGroupResourceTableData() {
        this.axios.get(CONST.SERVICE_REST_PACKAGE + "increaseResource/selectGroupResourcePageList", {
            params: {
              resourceId: this.resourceId,
              categoryId: this.categoryId,
            },
          })
          .then((response) => {
            this.tableData = response.data.records;
            this.totalNumResource = response.data.total;
          });
      },
      mouseenter1(data) {
        this.$set(data, 'show', true)
      },
      mouseleave1(data) {
        this.$set(data, 'show', false)
      },
      handleResourceNodeClick(data){
        this.categoryId=data.id;
        this.getGroupResourceTableData();
      },
      addResourceCate(data) {
        const newChild = { id: 't001', label: '', pid:data.id, bookId:data.bookId, resourceId:data.resourceId, children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
        this.$set(newChild, 'showInput', true)
      },
      saveResourceCate(data) {
        this.$set(data, 'showInput', false)
        let cateName = $("#c"+data.id).val();
        if(cateName==''){
          this.$message.success('名称不能为空');
          return;
        }
        if(data.id=="t001"){
          let param = {pid:data.pid, bookId: data.bookId, name:cateName, resourceId:data.resourceId}
          this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseResource/addGroupCate", param)
            .then((response) => {
              this.getResourceGroupTree();
            });
        }else{
          let param = {id:data.id,name:cateName}
          this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseResource/updateGroupCateName", param)
            .then((response) => {
              this.getResourceGroupTree();
            });
        }
      },
      editResourceCate(data) {
        this.$set(data, 'showInput', true)
        let propName = "c"+data.id;
        document.getElementById(propName).focus();
      },
      cancelEdit(node,data) {
        if(data.id=='t001'){
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex(d => d.id === data.id);
          children.splice(index, 1);
        }else{
          this.$set(data, 'showInput', false)
          this.$set(data, 'label', data.name)
        }
      },
      openAddGroupResourceDialogue(){
        this.$refs.setAddGroupResourceDialogue.visible = true
      },
      openEditGroupResourceDialogue(data){
        this.axios.get(CONST.SERVICE_REST_PACKAGE + "increaseResource/selectById", {
            params: {
              id: data.id,
            },
          })
          .then((response) => {
            this.editData=JSON.parse(JSON.stringify(response.data));
            if(this.editData.path){
              console.log(this.editData)
              let item = {percent:Number(100),originName:this.editData.fileName}
              this.$refs.setEditGroupResourceDialogue.progressItemArr.push(item)
            }
            if(this.editData.audioPath){
              let itemAudio = {percent:Number(100),originName:this.editData.audioName+".mp3"}
              this.$refs.setEditGroupResourceDialogue.progressAudioArr.push(itemAudio)
            }

          });
        this.$refs.setEditGroupResourceDialogue.visible = true
      },
      handleCurrentChangeResource(){

      },
      upOrDownCate(row,flag){
        let param = {
          id: row.id,
          upDownFlag:flag
        }
        this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseResource/upOrDownGroupCate", param)
          .then((response) => {
            this.getResourceGroupTree();
          });
      },
      handleNodeClick(data){
        this.categoryId=data.id;
        this.getGroupResourceTableData();
      },
      handleDialogueSelectionChange(selection) {
        console.log(selection)
        this.multipleDialogueSelection = selection;
      },
      moveToResourceGroupCate(){
        if(!this.multipleDialogueSelection || this.multipleDialogueSelection.length==0){
          this.$message.success('请选择要移动的子资源');
          return;
        }
        this.$refs.setMoveToCategoryDialogue.visible = true
        this.axios.get(CONST.SERVICE_REST_PACKAGE + "increaseResource/selectResourceSelectTree", {
          params: {
              resourceId: this.resourceId
            },
          })
          .then((response) => {
            this.cateSelectTreeData = JSON.parse(JSON.stringify(response.data));
          });
      },
      downloadResourceTemplate(){
        UTIL.downloadFile('/pmph/action/file/getFile?filename=increase/资源组子资源导入模板.xlsx');
      },
      deleteData(row,type) {
        this.$confirm('确认要删除该数据？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.get(CONST.SERVICE_REST_PACKAGE + "increaseResource/delete", {
            params: {
              id: row.id
            },
          }).then((response) => {
            if(type==1){
              this.getResourceGroupTree();
            }else{
              this.getGroupResourceTableData();
            }
          });
        }).catch(() => {

        });

      },
    },
  }
</script>

<style scoped>
  .el-main{
    padding:0px;
  }
  .upload-template{
    display: inline-block;
  }
  .el-dialog__body{
    padding:10px 20px;
  }
   /deep/ .el-scrollbar__wrap {
    overflow-x: auto;
  }
  .menu-item {
    width: 100%;
    min-height:32px;
    display: flex;
    float: right;
    cursor: pointer;
  }
  .clear {
    clear: both;
  }
  /deep/ .el-tree>.el-tree-node{
    min-width: 100%;
    display:inline-block;
  }
  /deep/ .el-tree-node__content{
    height: auto;
    min-height: 26px;
  }
  /deep/ .el-input.el-input--mini{
    margin: 4px 0;
  }
</style>
